<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <!-- <el-form-item label="汽车父id" prop="parentId">
         <el-input
           v-model="queryParams.parentId"
           placeholder="请输入汽车父id"
           clearable
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>-->
      <el-form-item label="用户昵称" prop="customName">
        <el-input
          v-model="queryParams.customName"
          placeholder="请输入用户昵称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="车辆品牌" prop="brand">
        <el-input
          v-model="queryParams.brand"
          placeholder="请输入车辆品牌"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="车牌号" prop="carNo">
        <el-input
          v-model="queryParams.carNo"
          placeholder="请输入车牌号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!--<el-form-item label="汽车编号" prop="carCode">
        <el-input
          v-model="queryParams.carCode"
          placeholder="请输入汽车编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>-->
      <!--      <el-form-item label="汽车类型" prop="carType">-->
      <!--        <el-select v-model="queryParams.carType" placeholder="请选择汽车类型" clearable>-->
      <!--          <el-option-->
      <!--            v-for="dict in dict.type.car_type"-->
      <!--            :key="dict.value"-->
      <!--            :label="dict.label"-->
      <!--            :value="dict.value"-->
      <!--          />-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="汽车标识" prop="carMark">-->
      <!--        <el-select v-model="queryParams.carMark" placeholder="请选择汽车标识" clearable>-->
      <!--          <el-option-->
      <!--            v-for="dict in dict.type.car_mark"-->
      <!--            :key="dict.value"-->
      <!--            :label="dict.label"-->
      <!--            :value="dict.value"-->
      <!--          />-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <!--<el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['operator:car:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-sort"
          size="mini"
          @click="toggleExpandAll"
        >展开/折叠</el-button>
      </el-col>-->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="resetQuery"></right-toolbar>
    </el-row>

    <el-table
      v-if="refreshTable"
      v-loading="loading"
      :data="carList"
      row-key="carId"
      :default-expand-all="isExpandAll"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <!--      <el-table-column label="汽车父id" prop="parentId" />-->
      <!--      <el-table-column label="汽车名称" align="center" prop="carName" />-->
      <el-table-column label="用户昵称" align="center" prop="customName"/>
      <el-table-column label="车辆品牌" align="center" prop="brand"/>
      <el-table-column label="车牌号" align="center" prop="carNo"/>
      <el-table-column label="车辆图片" align="center" prop="carImage" width="100">
        <!--        <template slot-scope="scope">-->
        <!--          <image-preview :src="scope.row.carImage" :width="50" :height="50"/>-->
        <!--        </template>-->
        <template slot-scope="scope">
          <div style="margin-left: 5px;width: 50px;height: 50px;display: inline-block" @click="showPic(scope.row.carImage)">
            <img :src="scope.row.carImage" style="width: 100%;height: 100%">
          </div>
        </template>
      </el-table-column>
      <!--      <el-table-column label="汽车类型" align="center" prop="carType">-->
      <!--        <template slot-scope="scope">-->
      <!--          <dict-tag :options="dict.type.car_type" :value="scope.row.carType"/>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <!--      <el-table-column label="汽车标识" align="center" prop="carMark">-->
      <!--        <template slot-scope="scope">-->
      <!--          <dict-tag :options="dict.type.car_mark" :value="scope.row.carMark"/>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['operator:car:edit']"
          >查看
          </el-button>
          <!--          <el-button-->
          <!--            size="mini"-->
          <!--            type="text"-->
          <!--            icon="el-icon-plus"-->
          <!--            @click="handleAdd(scope.row)"-->
          <!--            v-hasPermi="['operator:car:add']"-->
          <!--          >新增</el-button>-->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['operator:car:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改汽车库对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <!--        <el-form-item label="汽车父id" prop="parentId">-->
        <!--          <treeselect v-model="form.parentId" :options="carOptions" :normalizer="normalizer" placeholder="请选择汽车父id" />-->
        <!--        </el-form-item>-->
        <el-form-item label="用户昵称" prop="customName">
          <el-input v-model="form.customName" placeholder="请输入用户昵称" readonly/>
        </el-form-item>
        <el-form-item label="车辆品牌" prop="brand">
          <el-input v-model="form.brand" placeholder="请输入车辆品牌" readonly/>
        </el-form-item>
        <el-form-item label="车牌号" prop="carNo">
          <el-input v-model="form.carNo" placeholder="请输入车牌号" readonly/>
        </el-form-item>
        <el-form-item label="车辆图片">
          <!--          <image-upload v-model="form.carImage"/>-->
          <div style="width: 100px;height: 100px" @click="showPic(form.carImage)">
            <img style="width: 100%;height: 100%;" :src="form.carImage">
          </div>
        </el-form-item>
        <el-form-item label="生产日期" prop="production">
          <el-input v-model="form.production" placeholder="请输入生产日期" readonly/>
        </el-form-item>
        <el-form-item label="续航里程" prop="mileage">
          <el-input v-model="form.mileage" placeholder="请输入续航里程" readonly/>
        </el-form-item>
        <!--        <el-form-item label="汽车类型" prop="carType">-->
        <!--          <el-select v-model="form.carType" placeholder="请选择汽车类型">-->
        <!--            <el-option-->
        <!--              v-for="dict in dict.type.car_type"-->
        <!--              :key="dict.value"-->
        <!--              :label="dict.label"-->
        <!--              :value="dict.value"-->
        <!--            ></el-option>-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="汽车标识" prop="carMark">-->
        <!--          <el-select v-model="form.carMark" placeholder="请选择汽车标识">-->
        <!--            <el-option-->
        <!--              v-for="dict in dict.type.car_mark"-->
        <!--              :key="dict.value"-->
        <!--              :label="dict.label"-->
        <!--              :value="dict.value"-->
        <!--            ></el-option>-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body>
      <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto; max-height: 750px"/>
    </el-dialog>
  </div>
</template>

<script>
  import { listCar, getCar, delCar, addCar, updateCar } from '@/api/smart/operator/car'
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

  export default {
    name: 'Car',
    dicts: ['car_mark', 'car_type'],
    components: {
      Treeselect
    },
    data() {
      return {
        dialogVisible: false,
        dialogImageUrl: '',
        reqFileUrl: 'https://www.sdzctech.cn',
        // 遮罩层
        loading: true,
        // 显示搜索条件
        showSearch: true,
        // 汽车库表格数据
        carList: [],
        // 汽车库树选项
        carOptions: [],
        // 弹出层标题
        title: '',
        // 是否显示弹出层
        open: false,
        // 是否展开，默认全部展开
        isExpandAll: true,
        // 重新渲染表格状态
        refreshTable: true,
        // 查询参数
        queryParams: {
          carNo: null,
          customName: null,
          brand: null
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {}
      }
    },
    created() {
      this.getList()
    },
    methods: {
      showPic(item) {
        this.dialogImageUrl = item
        this.dialogVisible = true
      },
      /** 查询汽车库列表 */
      getList() {
        this.loading = true
        listCar(this.queryParams).then(response => {
          // this.carList = this.handleTree(response.data, "carId", "parentId");
          let list = []
          response.data.forEach(item => {
            if (item.carImage != null && item.carImage != undefined && item.carImage != '') {
              item.carImage = this.reqFileUrl + item.carImage
              list.push(item)
            }
          })
          this.carList = list
          this.loading = false
        })
      },
      /** 转换汽车库数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children
        }
        return {
          id: node.carId,
          label: node.carName,
          children: node.children
        }
      },
      /** 查询汽车库下拉树结构 */
      getTreeselect() {
        listCar().then(response => {
          this.carOptions = []
          const data = { carId: 0, carName: '顶级节点', children: [] }
          data.children = this.handleTree(response.data, 'carId', 'parentId')
          this.carOptions.push(data)
        })
      },
      // 取消按钮
      cancel() {
        this.open = false
        this.reset()
      },
      // 表单重置
      reset() {
        this.form = {
          carId: null,
          parentId: null,
          carName: null,
          carCode: null,
          carImage: null,
          carType: null,
          carMark: null
        }
        this.resetForm('form')
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm('queryForm')
        this.handleQuery()
      },
      /** 新增按钮操作 */
      handleAdd(row) {
        this.reset()
        this.getTreeselect()
        if (row != null && row.carId) {
          this.form.parentId = row.carId
        } else {
          this.form.parentId = 0
        }
        this.open = true
        this.title = '添加汽车库'
      },
      /** 展开/折叠操作 */
      toggleExpandAll() {
        this.refreshTable = false
        this.isExpandAll = !this.isExpandAll
        this.$nextTick(() => {
          this.refreshTable = true
        })
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        let that = this
        this.reset()
        this.getTreeselect()
        if (row != null) {
          this.form.parentId = row.carId
        }
        getCar(row.carId).then(response => {
          response.data.carImage = that.reqFileUrl + response.data.carImage
          this.form = response.data
          this.open = true
          this.title = '查看车辆详情'
        })
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs['form'].validate(valid => {
          if (valid) {
            if (this.form.carId != null) {
              updateCar(this.form).then(response => {
                this.$modal.msgSuccess('修改成功')
                this.open = false
                this.getList()
              })
            } else {
              addCar(this.form).then(response => {
                this.$modal.msgSuccess('新增成功')
                this.open = false
                this.getList()
              })
            }
          }
        })
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        this.$modal.confirm('是否确认删除车牌号为"' + row.carNo + '"的数据项？').then(function() {
          return delCar(row.carId)
        }).then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        }).catch(() => {
        })
      }
    }
  }
</script>
